<template>
  <div>
    <div class="user_info" v-if="isLogin">
      <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" round width="100" height="100"></van-image>
      <p>{{data.userInfo.userId}}</p>
      <p>{{data.userInfo.userRemark}}</p>
    </div>
    <div class="login_box" v-if="!isLogin">
      <van-button type="primary" size="small" @click="showLogin = true">一键登录</van-button>
    </div>
    <van-grid :border="true" :column-num="3">
      <van-grid-item>
        <van-icon name="location-o" size="33" color="#000033"/>
        <span class="menu_title">我的地址</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="service-o" size="33" color="#000033"/>
        <span class="menu_title">我的客服</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="star-o" size="33" color="#000033"/>
        <span class="menu_title">店铺收藏</span>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="gift-o" size="33" color="#000033"/>
        <span class="menu_title">邀请好友</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg"/>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg"/>
      </van-grid-item>
    </van-grid>
  </div>
  <div class="login_container" v-if="showLogin">
    <van-cell-group inset class="inner_login_box">
      <van-field v-model="phoneNumber" label="手机号" left-icon="phone-o" clearable="" placeholder="用户手机号"/>
      <van-field v-model="smsCode" center clearable left-icon="comment-o" label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="primary" @click="sendSms()" :disabled="disabled">{{ sendCodeText }}
          </van-button>
        </template>
      </van-field>
      <div class="login_btn_box">
        <van-button type="success" size="small" plain="" @click="usrLogin()">立即登录</van-button>
      </div>
    </van-cell-group>
    <div class="close">
      <van-icon name="close" color="white" size="26"/>
    </div>
  </div>
</template>

<script setup>
import {
  ref
  , reactive,
  onMounted
} from 'vue'
import { sendCode, login } from '../http/api.js'
import { Toast } from 'vant'
import { useStore } from 'vuex'

const data = reactive({
  userInfo: {}
})
const isLogin = ref(false)
const phoneNumber = ref('13036473658')
const showLogin = ref(false)
const smsCode = ref('6666')
var sendCodeText = ref('发送验证码')
var disabled = ref(false)
const store = useStore()
const sendSms = async () => {
  console.log('11')
  disabled.value = true
  var nextTime = 30
  var tm = setInterval(function () {
    sendCodeText.value = nextTime + 's'
    console.log(sendCodeText.value)
    nextTime--
    if (nextTime <= 0) {
      sendCodeText.value = '发送验证码'
      disabled.value = false
      clearTimeout(tm)
    }
  }, 1000)
  const rst = await sendCode({
    phone: phoneNumber.value
  })
  console.log(rst)
}
const usrLogin = async () => {
  console.log(22)
  const rst = await login({
    phone: phoneNumber.value,
    code: smsCode.value
  })
  console.log(rst)
  if (rst.code === 200) {
    Toast.success('登录成功')
    showLogin.value = false
    isLogin.value = true
    store.commit('SET_USER_INFO', rst.data)
    store.commit('LOGIN', true)
    data.userInfo = rst.data
  } else {
    Toast.fail(rst.msg)
  }
}
onMounted(() => {
  isLogin.value = store.state.isLogin
  data.userInfo = store.state.userInfo
})
</script>

<style>
.menu_title {
  padding: 5px;
  color: #000033;
}

.close {
  margin-top: 15px;
}

.login_btn_box {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

.inner_login_box {
  padding: 15px 0;
}

.user_info {
  margin-top: 5px;
}

.login_box {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login_container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding-top: 20vh;
}
</style>
